<template>
  <div style="width: 100%">
    <el-table
        ref="mainTableRef"
    :data="groupedTableData"
    border
    stripe
    >
    <!-- 展开列 -->
    <el-table-column type="expand" width="60" label="查看">
      <template #default="scope">
        <el-table
            :data="scope.row.children"
            border
            size="small"
            style="width: 100%"
        >
          <el-table-column prop="urlfore" label="URL前缀" />
          <el-table-column prop="urlafter" label="URL后缀" />
          <el-table-column prop="type" label="数据类型" width="100" />
          <el-table-column prop="label" label="标签" width="120" />
          <el-table-column prop="name" label="字段名" width="120" />
          <el-table-column prop="placeholder" label="提示描述词" />
        </el-table>
      </template>
    </el-table-column>

    <!-- 分组名称列 -->
    <el-table-column label="名称">
      <template #default="scope">
        <div style="display: flex; align-items: center; gap: 8px;">
          <el-icon :size="16" :color="scope.row.expanded ? '#409EFF' : '#909399'">
            <FolderOpened v-if="scope.row.expanded" />
            <Folder v-else />
          </el-icon>
          <span style="font-weight: bold;">{{ scope.row.key }}</span>
          <el-tag size="small" type="info">
            {{ scope.row.children.length }} 项
          </el-tag>
        </div>
      </template>
    </el-table-column>

    <!-- 汇总信息列 -->
    <el-table-column label="URL信息">
      <template #default="scope">
          <span v-if="scope.row.children.length > 0">
            {{ scope.row.children[0].urlafter }}...
          </span>
      </template>
    </el-table-column>

    <!-- 操作列 -->
    <el-table-column label="操作" width="100">
      <template #default="scope">
        <el-button
            link
            type="primary"
            size="small"
            @click="toggleExpand(scope.row)"
        >
          {{ scope.row.expanded ? '收起' : '展开' }}
        </el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Folder, FolderOpened } from '@element-plus/icons-vue'
import { useAppStore } from "../store/stroes.js"

const appStore = useAppStore()
const flatTableData = ref([])
const mainTableRef = ref(null) // ✅ 关键

// 解析原始数据
onMounted(() => {
  const result = []
  appStore.userConfigers.forEach(item => {
    const key = Object.keys(item)[0]
    const value = item[key]
    const urlfore = value.url.urlfore
    const urlafter = value.url.urlafter
    value.data.forEach(d => {
      result.push({
        key,
        urlfore,
        urlafter,
        type: d.type,
        label: d.label,
        name: d.name,
        placeholder: d.placeholder
      })
    })
  })
  flatTableData.value = result
})

// 分组数据
const groupedTableData = computed(() => {
  const groups = {}
  flatTableData.value.forEach(item => {
    if (!groups[item.key]) {
      groups[item.key] = {
        key: item.key,
        children: [],
        expanded: false
      }
    }
    groups[item.key].children.push(item)
  })
  return Object.values(groups)
})

// ✅ 切换展开状态（正确版）
const toggleExpand = (row) => {
  row.expanded = !row.expanded
  mainTableRef.value.toggleRowExpansion(row, row.expanded)
}
</script>

<style scoped>
:deep(.el-table .el-table__expand-icon) {
  color: #409EFF;
}
:deep(.el-table .el-table__expanded-cell) {
  padding: 10px;
  background-color: #fafafa;
}
</style>
